<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            background-color:red;
            height: 100px;
            width: 100px;
            margin: 10px 0;
            position: absolute;
        }

    </style>
</head>
<body>
    <button id="btn">开始</button>
    <div id="box1"></div>
    <script>
        //读取元素的方法：
        function getstyle(obj,name){
            // if(window.getComputedStyle){
            //     //正常的浏览器的方式，都具有getComputedStyle()方法
            //     return getComputedStyle(obj,unll)[name];
            // }else{
            //     //IE8的方式，没有getComputedStyle()方法
            //     return obj.currentStyle[name];
            // }

            //三元表达式：
            return window.getComputedStyle?getComputedStyle(obj,name)[name]: obj.currentStyle[name];
        }
        



        window.onload = function(){
            var box1 = document.getElementById("box1");
            var btn = document.getElementById("btn");
            //定义一个变量用来保存定时器的标识
            var timer;
            
            btn.onclick = function(){
                clearInterval(timer);
                //开启定时器
                var timer = setInterval(function(){
                    var lef = parseInt( getstyle(box1,"left"));
                    console.log(lef/100);
                    if( (lef / 100) < 2.3 ){
                        box1.style.left = lef+3+"px";
    
                    }else{
                        console.log(lef);
                    clearInterval(timer);
                    }
                
                },30)
            }
        }
    </script>
</body>
</html>